<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>ByteCollege云课</title>
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{css/monokai-sublime.css}"/>
    <link rel="stylesheet" th:href="@{css/katex.css}"/>
    <link rel="stylesheet" th:href="@{css/video-is.css}"/>
    <link rel="stylesheet" th:href="@{css/styles.css}"/>
    <link rel="stylesheet" th:href="@{css/answerAnalytic.css}"/>
    <script th:src="@{js/jquery-3.3.1.min.js}"></script>
    <script th:src="@{js/bootstrap.js}"></script>
    <style>
        body {
            background: #f9f9f9;
            font-size: 12px;
        }

        body,
        html {
            height: 100%;
        }

        div {
            display: block;
        }

        li {
            text-align: -webkit-match-parent;
        }

        .position-relative {
            position: relative;
        }

        .banner-container form .tip {
            padding-top: 5px;
            color: hsla(0, 0%, 100%, .6);
        }

        .header {
            background-color: #191e29;
            border-width: 0;
        }

        .header .navbar-brand {
            padding: 0;
        }

        .header .navbar-brand img {
            height: 50px;
        }

        .header .navbar-nav > li > a {
            font-size: 16px;
        }

        .header .navbar-nav .dropdown .dropdown-menu {
            min-width: 130px;
            border-width: 0;
            text-align: center;
        }

        .header .navbar-nav .dropdown .dropdown-menu {
            background-color: #191e29;
        }

        .header .navbar-nav > li.active > a,
        .header .navbar-nav > li.active > a:focus,
        .header .navbar-nav > li.active > a:hover {
            color: #fff;
            background-color: #191e29;
        }

        .layout-body,
        .layout-side {
            padding: 0 5px;
        }

        .layout {
            min-height: 80%;
            margin-top: 70px;
            margin-bottom: 20px;
        }

        .footer {
            padding-top: 20px;
            background: #191e29;
        }

        .footer-col .col-title {
            font-size: 14px;
            margin-bottom: 10px;
            color: hsla(0, 0%, 100%, .5);
        }

        .footer-col a {
            display: inline-block;
            margin-bottom: 3px;
            color: hsla(0, 0%, 100%, .5);
        }

        .copyright,
        .copyright a {
            color: #777;
        }

        .copyright {
            height: 50px;
            line-height: 50px;
            background: #171918;
            margin-top: 20px;
        }

        .text-center {
            text-align: center;
        }

        .breadcrumb {
            margin: 0;
            padding: 10px 0;
            font-size: 13px;
            background: transparent;
            border-radius: 0;
        }

        .breadcrumb li a {
            color: #666;
        }

        .course-infobox-header {
            overflow: hidden;
        }

        .course-infobox {
            margin-bottom: 10px;
        }

        .content {
            margin-bottom: 10px;
            padding: 30px;
            background: #fff;
            border: 1px solid #eee;
        }

        .course-infobox-footer {
            margin: 0 -30px -30px;
            padding: 12px 30px;
            color: #999;
            background: #fff;
            font-size: 14px;
            border-top: 1px solid #ecf0f3;
        }

        .lab-item {
            position: relative;
            padding: 6px 0;
            margin: 12px 0;
        }

        .btn {
            border-radius: 0;
        }

        .lab-item > div {
            display: inline-block;
            margin: 0 12px;
            padding: 6px 0;
            font-size: 16px;
            vertical-align: middle;
        }

        .lab-item-index {
            color: #999;
        }

        .lab-item-title {
            max-width: 300px;
            white-space: pre;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .side-image img {
            width: 100%;
        }

        .sidebox {
            margin-bottom: 10px;
            padding: 15px;
            background: #fff;
            border: 1px solid #eee;
        }

        .sidebox-header {
            overflow: hidden;
        }

        .sidebox-header {
            padding: 0 0 10px;
            border-bottom: 1px solid #eee;
        }

        .sidebox-body {
            padding: 10px 0;
            font-size: 14px;
        }

        .mooc-teacher .mooc-info .name {
            font-size: 15px;
            margin-right: 10px;
            color: #4c5157;
        }

        .mooc-teacher .mooc-info div {
            margin: 5px 0;
            font-size: 14px;
            color: #4c5157;
        }

        .mooc-teacher .mooc-info div {
            margin: 5px 0;
            font-size: 14px;
            color: #4c5157;
        }

        .mooc-teacher .mooc-content img {
            width: 100%;
        }

        .mooc-teacher .mooc-extra-info div {
            font-size: 14px;
            color: #4c5157;
            line-height: 24px;
        }

        .sidebox-footer {
            overflow: hidden;
        }

        footer a {
            float: right;
            font-size: 14px;
        }

        .sidebox-footer a {
            color: #529fd2;
        }

        .answer-list-item {
            display: flex;
        }

        .clearfix {
            zoom: 1;
        }

        .cont1 {
            display: flex;
            flex-direction: row;
        }

        .cont2 {
            display: flex;
            flex-direction: column;
        }

        .clearfix:after, .clearfix:before {
            clear: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
        }
    </style>
    <script>
        function course() {
            var xhr = new XMLHttpRequest();

        }
    </script>
</head>
<body>
<div th:include="index::head-nav"></div>

<!--课程模块开始-->
<div class="container layout layout-margin-top">
    <div class="row">
        <div class="col-md-9 layout-body">
            <div class="side-image side-image-mobile">
                <img src="https://dn-simplecloud.shiyanlou.com/ncn1.jpg?imageView2/0/h/300">
            </div>
            <div class="content course-infobox">
                <div class="clearfix course-infobox-header">
                    <h4 class="pull-left course-infobox-title">
                        <span th:title="${course.courseName}" th:text="${course.courseName}"></span>
                    </h4>
                    <div class="pull-right course-infobox-follow" data-follow-url="/courses/1/follow"
                         data-unfollow-url="/courses/1/unfollow">
                        <form th:action="@{/course/addCollect}" th:if="${collectStatus == 1}">
                            <input type="hidden" name="courseId" th:value="${course.courseId}">
                            <span class="course-infobox-followers">[[${collectNum}]]</span>
                            <span>人收藏</span>
                            <button type="submit" class="submit-question btn btn-primary">
                                收藏
                            </button>
                        </form>
                        <div th:if="${collectStatus == 0}">
                            <span class="course-infobox-followers">[[${collectNum}]]</span>
                            <span>人收藏</span>
                            <div type="button" class="btn">
                                <span class="submit-question btn btn-primary">已收藏</span>
                            </div>
                        </div>
                        <i class="fa fa-star-o" data-next="/login?next=%2Fcourses%2F1"></i>
                    </div>
                </div>
                <div class="clearfix course-infobox-body">
                    <div class="course-infobox-content">
                        <p th:title="${course.courseDescribe}" th:text="${course.courseDescribe}"></p>
                    </div>
                    <div class="pull-right course-infobox-price">
                    </div>
                </div>
                <div class="clearfix course-infobox-footer">
                    <div style="width: 100%;">
                        <img th:src="${course.coursePic}" width="300" height="170" th:title="${course.courseName}">
                        <button type="button" class="btn btn-success"> <a style="text-decoration: none;" th:href="${course.courseUrl}">
                        学习 </a></button>

                    </div>
                    <div>
                        <span th:if="${course.courseStatus} eq 1">
                            <img th:src="@{/img/vip-icon.png}">
                            <span>会员</span>
                        </span>
                        <span th:if="${course.courseStatus} eq 0">
                            <span>免费课程</span>
                        </span>
                    </div>
                    <div class="pull-right course-infobox-learned" th:text="${course.courseClicks}+'人学过'"></div>
                </div>
            </div>
            <div class="content">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation">
                        <a href="#comments" class="stat-event" aria-controls="comments" role="tab"
                           data-stat="course_comment" data-toggle="tab">课程评论([[${cremarkNum}]])</a>
                    </li>
                </ul>
                <div th:unless="${session?.data?.userId}">
                    <div role="tabpanel" class="tab-pane course-comment" id="comments">
                        <div class="comment-box">
                            <div class="comment-form">
                                <div class="comment-form-unlogin">
                                    请
                                    <a th:href="@{/user/tologin}" data-toggle="modal" data-sign="signin"
                                       data-next="/courses/1"> 登录 </a>
                                    后发表评论
                                </div>
                            </div>
                            <div class="comment-list">
                            </div>
                            <div class="pagination-container"></div>
                        </div>
                    </div>
                </div>
                <!--显示课程评论要将class="modal fade askquestion-modal"删除-->
                <div th:if="${session?.data?.userId}" id="askquestion" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role=document>
                        <div class="modal-content">
                            <div class="modal-body words-ctrl">
                                <form class="form-horizontal" method="post" th:action="@{/course/addCremark}">
                                    <input type="hidden" name="courseId" th:value="${course.courseId}">
                                    <input name="_csrf_token" type=hidden
                                           value="1483794941##be4fb68b276c5f7cb970936cb25985cd53b943d1">
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">描述</label>
                                        <div class="col-md-10">
                                            <div class="tabpanel mkeditor">
                                                <ul class="nav nav-tabs" role="tablist">
                                                    <li role="presentation" class="active">
                                                        <a href="#mkeditor-editor" role="tab" data-toggle="tab">编辑</a>
                                                    </li>
                                                    <!--<li role="presentation">-->
                                                    <!--<a class="mkeditor-btn-view" href="#mkeditor-viewer" role="tab"-->
                                                    <!--    data-toggle="tab" onclick="course()">预览</a>-->
                                                    <!--</li>-->
                                                </ul>
                                                <div class="tab-content">
                                                    <div class="tab-pane active mkeditor-editor" id="mkeditor-editor"
                                                         role="tabpanel">
                                                        <div class="btn-group" role="group">
                                                            <button type="button"
                                                                    class="btn btn-default mkeditor-btn-bold">
                                                                <i class="fa fa-bold"></i>
                                                            </button>
                                                            <button type="button"
                                                                    class="btn btn-default mkeditor-btn-italic">
                                                                <i class="fa fa-italic"></i>
                                                            </button>
                                                            <button type="button"
                                                                    class="btn btn-default mkeditor-btn-link">
                                                                <i class="fa fa-link"></i>
                                                            </button>
                                                            <button type="button"
                                                                    class="btn btn-default mkeditor-btn-quote">
                                                                <i class="fa fa-quote-left"></i>
                                                            </button>
                                                            <button type="button"
                                                                    class="btn btn-default mkeditor-btn-code">
                                                                <i class="fa fa-code"></i>
                                                            </button>
                                                            <button id="mkeditor-pickfile" type="button"
                                                                    class="btn btn-default mkeditor-btn-img">
                                                                <i class="fa fa-image"></i>
                                                            </button>
                                                            <button type="button"
                                                                    class="btn btn-default mkeditor-btn-listol">
                                                                <i class="fa fa-list-ol"></i>
                                                            </button>
                                                            <button type="button"
                                                                    class="btn btn-default mkeditor-btn-listul">
                                                                <i class="fa fa-list-ul"></i>
                                                            </button>
                                                        </div>
                                                        <textarea name="cremarkContent" class="content" min="0"
                                                                  max="20000"
                                                                  placeholder="推荐使用 Markdown 语法，至少输入 5 个字"></textarea>
                                                        <div class="help-block"></div>
                                                    </div>
                                                    <!--                                                    <div class="tab-pane mkeditor-viewer markdown-body" id="mkeditor-viewer"-->
                                                    <!--                                                         role="tabpanel">-->
                                                    <!--                                                        <div ></div>                                                        </div>-->
                                                    <!--                                                    </div>-->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group modal-footer">
                                        <button type="reset" class="btn btn-default">
                                            取消
                                        </button>
                                        <button type="submit" class="submit-question btn btn-primary">
                                            提交
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div th:each="cremark:${cremarkList}">
                    <div class="answer-list-item clearfix cont1">
                        <!--                        <div class="votebar">-->
                        <!--                            <button class="click-like up" aria-pressed="false" title="赞同"><i class="vote-arrow"></i><span class="count">13</span></button>-->
                        <!--                            <button class="click-dislike down" aria-pressed="true" title="反对"><i class="vote-arrow"></i>-->
                        <!--                            </button>-->
                        <!--                        </div>-->
                        <div class="answer-content clearfix cont2" data-cmt-id="521796" data-dislikecnt="4"
                             data-isdisliked="" data-recommend="0">
                            <div class="answer-info cont1">
                                <a href="/profile/2655366" class="answer-head" data-card-uid="2655366"
                                   data-card-index="5"><img
                                        src="https://images.nowcoder.com/head/583m.png?x-oss-process=image/resize,m_mfit,h_100,w_100"
                                        th:alt="${cremark.userName}+'头像'"></a>
                                <a class="answer-name level-color-6" data-card-uid="2655366" href="/profile/2655366"
                                   data-card-index="6" th:text="${cremark.userName}"></a>
                            </div>
                            <div class="answer-brief" th:text="${cremark.cremarkContent}"></div>
                            <div class="answer-legend">
                                <span class="answer-time"
                                      th:text="${#dates.format(cremark.cremarkTime,'yyyy-MM-dd HH-mm-ss')}"></span>
                                <!--                                <a class="click-reply" href="javascript:void(0);">回复(0)</a>-->
                            </div>
                        </div>
                    </div>
                </div>
                <nav class="pagination-container">
                    <ul class="pagination">
                        <li th:class="${page.hasPrevious()?'':'disabled'}">
                            <a th:unless="${page.current}==1"
                               th:href="@{/course/search(pageIndex=${page.current}-1,search=${search})}"
                               aria-label="Previous">
                                <span aria-hidden="true">上一页</span>
                            </a>
                            <a th:if="${page.current}==1" href="javascript:void(0);" aria-label="Previous">
                                <span aria-hidden="true">上一页</span>
                            </a>
                        </li>
                        <li th:class="${page.current} eq 1 ? 'active':''">
                            <a th:href="@{/course/search(pageIndex=1,search=${search})}">首页</a>
                        </li>
                        <li>
                            <a href="#">第[[${page.current}]]页/共[[${page.pages}]]页</a>
                        </li>
                        <li th:class="${page.current}==${page.pages} ? 'active':''">
                            <a th:href="@{/course/search(pageIndex=${page.pages},search=${search})}">尾页</a>
                        </li>

                        <li th:class="${page.hasNext()?'':'disabled'}">
                            <a th:unless="${page.current}==${page.pages}" aria-label="Next"
                               th:href="@{/course/search(pageIndex=${page.current}+1,search=${search})}">
                                <span aria-hidden="true">下一页</span>
                            </a>
                            <a th:if="${page.current}==${page.pages}" aria-label="Next"
                               href="javascript:void(0);">
                                <span aria-hidden="true">下一页</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="col-md-3 layout-side">
            <div class="side-image side-image-pc">
                <img src="img/ncn1.jpg">
            </div>
            <div class="side-image">
                <a href="/vip" target="_blank">
                    <img src="../img/banner-vip.png">
                </a>
            </div>
            <div class="sidebox adv-course">
                <div class="sidebox-header">
                    <h4 class="sidebox-title">进阶课程</h4>
                </div>
                <div class="sideobx-body course-content">
                    <a href="/courses/204">实用Linux Shell编程</a>
                    <a href="/courses/2">Vim编辑器</a>
                    <a href="/courses/68">Linux命令实例练习</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="invite-user" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">邀请好友，双方都可获赠实验豆！</h4>
            </div>
            <div class="modal-body">
                <p>
                <h4><a href="#sign-modal" data-toggle="modal" data-sign="signin">登录</a>后邀请好友注册，您和好友将分别获赠3个实验豆！
                </h4>
                </p>
                <div id="msg-modal"></div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="flash-message" tabindex="-1" role="dialog">
    <div class="modal-dialog" rolw="document">
    </div>
</div>
<div class="modal fade" id="modal-message" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span
                        aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">注意</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary confirm" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="charge-course-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 class="modal-title">课程报名</h4>
            </div>
            <div class="modal-body">
                <form class="row form-horizontal">
                    <input name="_csrf_token" type=hidden
                           value="1483794941##be4fb68b276c5f7cb970936cb25985cd53b943d1">
                    <div class="form-group">
                        <label class="col-md-2 control-label">邮箱</label>
                        <div class="col-md-10">
                            <input type="email" class="form-control" name="email" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">手机号码</label>
                        <div class="col-md-10">
                            <div class="input-group">
                                <input type="text" class="form-control" name="phone_no">
                                <span class="input-group-btn">
											<button class="btn btn-default charge-course-phone-code" type="button"
                                                    style="padding:7px 12px;">获取验证码</button>
										</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">验证码</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" name="verify_code">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary charge-course-confirm">确定</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="paid-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" style="text-align:center;">支付确认</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <button class="btn btn-primary paid-confirm" type="button">支付成功</button>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-primary paid-method" type="button"
                                style="background:none; color:#0c9">选择支付方式
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--页尾-->
<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-sm-3 col-md-3 footer-col">
                <div class="col-title">公司</div>
                <a href="privacy/index.html" target="_blank">关于我们</a><br>
                <a href="privacy/index.html" target="_blank">联系我们</a><br>
                <a href="http://www.simplecloud.cn/jobs.html" target="_blank">加入我们</a><br>
                <a href="https://blog.shiyanlou.com" target="_blank">技术博客</a><br>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-3 footer-col">
                <div class="col-title">合作</div>
                <a href="privacy/index.html" target="_blank">我要投稿</a><br>
                <a href="labs/index.html" target="_blank">教师合作</a><br>
                <a href="edu/index.html" target="_blank">高校合作</a><br>
                <a href="privacy/index.html" target="_blank">友情链接</a>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-3 footer-col">
                <div class="col-title">服务</div>
                <a href="bootcamp/index.html" target="_blank">实战训练营</a><br>
                <a href="vip/index.html" target="_blank">会员服务</a><br>
                <a href="courses/reports.html" target="_blank">学习报告</a><br>
                <a href="questions/index.html?tag=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98"
                   target="_blank">常见问题</a><br>
                <a href="privacy/index.html" target="_blank">隐私条款</a>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-3 footer-col">
                <div class="col-title">学习路径</div>
                <a href="paths/index.html" target="_blank">Java基础学习路径</a><br>
                <a href="paths/index.html" target="_blank">Java高级学习路径</a><br>
                <a href="paths/index.html" target="_blank">Mysql学习路径</a><br>
                <a href="paths/index.html" target="_blank">MyBatis学习路径</a><br>
                <a href="paths/index.html" target="_blank">JavaWeb学习路径</a><br>
                <a href="paths/index.html" , target="_blank">全部</a>
            </div>
        </div>
    </div>
    <div class="text-center copyright">
        <span>Byte云课版权所有</span>
    </div>
</div>
</body>
</html>
<script>
    $(document).on('show.bs.modal', '.modal', function (e) {
        var $this = $(this);
        var $modal_dialog = $this.find('.modal-dialog');
        $this.css('display', 'block');
        $modal_dialog.css({
            'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2)
        });
    });
</script>
